
import { useEffect, useRef } from 'react';
import { init, graphic } from 'echarts';


interface Props {
  value: number;
  width: number;
}
export default function RingChart(props: Props): Props {
  const { value, width } = props;
  const domRef = useRef(null);

  const initChart = () => {
    const chart = init(domRef.current, 'purple');
    chart.setOption({
      series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          radius: '90%', 
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
          },
          axisLine: {
            lineStyle: {
              width
            }
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
          },
          data: [{
            value,
            detail: {
              valueAnimation: true,
              offsetCenter: ['0%', '0%']
            }
          }],
          detail: {
            fontSize: 60,
            formatter: '{value}%'
          }
        }
      ]
    });
  }


  useEffect(() => {
    initChart();
  }, [])
  return (
    <div ref={domRef} className='size-full'></div>
  );
}
